<template>
	<transition>
		<div class="pro_details">
			<header-component></header-component>
			<div class="pro_details">
				<div class="pro_img">
					<img src="~imgs/pro_details_2.gif"/>
				</div>
				<div class="pro_introduce">
					<div class="pro_title">
						<p>
							<span>行车记录仪高清夜视双镜头语音声控导航一体机 </span>
							<i>全球销量TOP100</i>
						</p>
						<p>
							<img src="~imgs/pro_details_3.gif"/>
							<em>分享有奖</em>
						</p>
					</div>
					<div class="pro_info">
						<p>
							<em>¥&nbsp;&nbsp;&nbsp;2680.00</em>
							<i>大促销</i>
						</p>
						<p>
							<span>颜色分类:</span>
							<em>银白</em>
							<i>经典黑</i>
						</p>
						<p>
							<span>数量：</span>
							<span>
								<input type="text" value="1"/>
								<i></i>
								<i></i>
							</span>
							<span>库存<em>256</em>件</span>
						</p>
						<p>
							<span>安装类型：</span>
							<i>上门安装</i>
							<em>无需安装</em>
						</p>
						<p>发货时间：卖家承诺48小时内发货</p>
					</div>
					<div class="pro_main">
						<div class="pro_tab">
							<mt-navbar v-model="selected">
							  <mt-tab-item id="1"><button>产品详情</button></mt-tab-item>
							  <mt-tab-item id="2"><button>评价(<i>545</i>)</button></mt-tab-item>
							</mt-navbar>
						</div>
						<!-- tab-container -->
						<mt-tab-container v-model="selected">
						  <mt-tab-container-item id="1">
						   	<keep-alive>
						   		 <div class="pro_infos">
									<pros-info></pros-info>
								</div>
						   	</keep-alive>
						  </mt-tab-container-item>
						  <mt-tab-container-item id="2">
						   	<appraise></appraise>
						  </mt-tab-container-item>
						</mt-tab-container>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import Header from "./components/Header"
	import Pro_info from  "@/pages/pro_details/components/Pro_info"
	import Appraise from  "@/pages/pro_details/components/Appraise"
	export default{
		data(){
			return{
				selected:"1"
			}
		},
		components:{
			"header-component":Header,
			"ProsInfo":Pro_info,
			"Appraise":Appraise
		}
	}
</script>

<style lang="stylus" scoped>
	.v-enter
		transform: translate3d(100%,0,0)
	.v-enter-active,.v-leave-active
		transition: all .3s;
	.v-leave-to
		transform: translate3d(-100%,0,0)
		position: absolute;
	.pro_details
		width: 100%;
		.pro_img
			width: 100%;
			margin-bottom: 0.32rem;
			img
				width: 100%;
				height: 3.2rem;
		.pro_introduce
			width: 7.2rem;
			margin: 0.1rem auto;
			.pro_title
				overflow: hidden;
				p:first-child
					float: left;
					width: 3rem;
					span
						font-size: 0.24rem;
						color: #090909;
						display: block;
						font-weight: 800;
					i
						font-size: 0.22rem;
						color: #090909;
				p:last-child
					float: right;
					text-align: center;
					em
						display: block;
						font-size: 0.24rem;
						color: #090909;
						font-weight: 700;
			.pro_info
				width: 100%;
				border-bottom: 0.01rem dotted #515151;
				p
					overflow: hidden;
				p:nth-of-type(1)
					em
						display: block;
						font-size: 0.24rem;
						height: 0.6rem;
						color: #d81e06;
						font-weight: 700;
						float: left;
						line-height: 0.6rem;
					i
						padding: 0.1rem 0.2rem;
						background: #d28079;
						font-size: 0.2rem;
						color: #fff;
						float: left;
						margin-left: 0.32rem;
						font-weight: 700;
				p:nth-of-type(2)
					span
						font-size: 0.24rem;
						color: #090909;
						float: left;
						margin-top: 0.2rem;
						font-weight: 700;
					em
						font-size: 0.2rem;
						color: #090909;
						float: left;
						margin: 0 0.3rem;
						margin-top: 0.2rem;
					i
						display: block;
						padding: 0.18rem 0.08rem;
						border: 0.01rem solid  #090909;
						float: left;
						font-size: 0.2rem;
						color: #090909;
				p:nth-of-type(3)
					span:nth-of-type(1)
						float: left;
						font-size: 0.24rem;
						color: #090909;
					span:nth-of-type(2)	
						display: block;
						float: left;
						position: relative;
						width: 1.02rem;
						input
							display: block;
							width: 0.68rem;
							height: 0.42rem;
							border: 0.02rem solid #515151;
							float: left;
							color: #090909;
							text-align: center;
							font-size: 0.24rem;
							padding: 0;
							margin-right: 0.1rem;
						i
							display: block;
							float: left;
							width: 0.28rem;
							height: 0.2rem;
							border: 0.02rem solid #515151;
							text-align: center;
							font-size: 0.12rem;
							line-height: 0.2rem;
							color: #000;
							position: absolute;
							right: 0;
						i:nth-of-type(1)
							background: url(../../../static/images/pro_details_top.gif)no-repeat center;
							background-size: 0.14rem 0.08rem;
						i:nth-of-type(2)
							background: url(../../../static/images/pro_details_bottom.gif)no-repeat center;
							background-size: 0.14rem 0.08rem;
							top: 0.22rem;
					span:nth-of-type(3)
						float: left;
						margin: 0 0.2rem;
						font-size: 0.22rem;
						color: #090909;
				p:nth-of-type(4)
					span
						font-size: 0.24rem;
						color: #090909;
						float: left;
						margin-top: 0.2rem;
						font-weight: 700;
					em
						font-size: 0.2rem;
						color: #090909;
						float: left;
						margin: 0 0.3rem;
						margin-top: 0.2rem;
					i
						display: block;
						padding: 0.18rem 0.08rem;
						border: 0.01rem solid  #090909;
						float: left;
						font-size: 0.2rem;
						color: #090909;
				p:nth-of-type(5)
					font-size: 0.24rem;
					color: #515151;
		.pro_main
			width: 7.02rem;
			margin: 0 auto;
			.pro_tab
				display: flex;
				justify-content: center;
				button
					width: 2rem;
					height: 0.74rem;
					border: 0.01rem solid #dbdbdb;
					margin-left: -0.01rem;
					margin: 0.14rem 0;
					font-size: 0.28rem;
					color: #515151;
			.pro_tab>>>
				.mint-navbar .mint-tab-item.is-selected
					border-bottom: none;
					button
						border-bottom: none;
						color: #515151;
						background: #a6c7e6;
			.pro_infos
				width: 100%;
</style>